<script setup lang="ts">
import pkg from '~/../package.json';
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import {buildCache} from "~/utils/Cache";
const status = ref<boolean>(
    !localStorage.getItem('XCSJ_SYCM_DISABLED')
);
// 获取package.json中的version版本号
const version = ref<string>('');
const getCurrentVersion = async () => {
  const cache = buildCache('XCSJ', 'XCSJ_CACHE');
  let cacheVersion = await cache.get('currVersionString');
  if (!cacheVersion) {
    version.value = pkg.version;
  } else {
    version.value = cacheVersion;
  }
}
getCurrentVersion();
watch(status, (val) => {
  if (val) {
    localStorage.removeItem('XCSJ_SYCM_DISABLED');
  } else {
    localStorage.setItem('XCSJ_SYCM_DISABLED', 'true');
    setTimeout(() => {
      location.reload();
    }, 500);
  }
})
onMounted(() => {
  const id = inject('ID');
  const element = document.querySelector('#'+id);
  let isDragging = false;
  let initialX: number;
  let initialY: number;

  element?.addEventListener('mousedown', startDrag);
  element?.addEventListener('mouseup', stopDrag);
  element?.addEventListener('mouseleave', stopDrag);
  element?.addEventListener('mousemove', drag);

  function startDrag(e: { clientX: number; clientY: number; }) {
    isDragging = true;
    initialX = e.clientX;
    initialY = e.clientY;
  }

  function stopDrag() {
    isDragging = false;
  }

  function drag(e: { clientX: number; clientY: number; }) {
    if (isDragging) {
      const dx = e.clientX - initialX;
      const dy = e.clientY - initialY;
      element.style.left = `${element.offsetLeft + dx}px`;
      element.style.top = `${element.offsetTop + dy}px`;
      initialX = e.clientX;
      initialY = e.clientY;
    }
  }
})
</script>

<template>
  <base-app>
    <div class="sycm-entry">
      <img src="../../../assets/icon-trans-white.png" class="noDrag"/>
      <div class="tip">工具箱</div>
      <a-switch style="width: 70%;" size="small" v-model:checked="status"/>
      <div style="color: #fff;
    font-size: 10px;
    padding-top: 3px;
  user-select: none;">
        V{{version}}
      </div>
    </div>
  </base-app>
</template>

<style lang="less" scoped>
.noDrag {
  user-select: none;
  -webkit-touch-callout: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  pointer-events: none;
}
.sycm-entry {
  height: 140px;
  background-image: linear-gradient(0deg, #7319ee 0, #07cee5);
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  text-align: center;
  border-radius: 5px;
  width: 45px;
  padding-top: 5px;
  cursor: move;
  // 禁用复制
  user-select: none;
  img {
    max-width: 80%;
    user-select: none;
  }
  .tip{
    padding-top: 10px;
    display: inline-block;
    color: #fff;
    writing-mode: tb;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    user-select: none;
  }
}
</style>
